<template>
	<view class="gy-loading-icon" :style="[sizeStyle]">
		<view v-if="props.mode === 'custom'" class="gy-loading-icon-image" :style="[sizeStyle, {
			background: `transparent url(${ props.path }) no-repeat`,
			backgroundSize: '100%',
			animationTimingFunction: `steps(${props.steps})`
		}]"></view>
		<view v-else-if="props.mode === 'circle'" class="gy-loading-icon-circle"  :style="[sizeStyle, {
			borderWidth: props.lineWidth + 'rpx',
			borderColor: `${props.lineColor} ${props.lineColor} ${props.lineColor} ${props.color}`
		}]"></view>
		<view v-else-if="images[props.mode]" class="gy-loading-icon-font" :class="images[props.mode].icon"  :style="[sizeStyle, {
			fontSize: props.size + 'rpx',
			backgroundImage: props.bgImage,
			animationTimingFunction: `steps(${images[props.mode].steps})`
		}]"></view>
		<view v-else class="gy-loading-icon-font" :class="props.mode"  :style="[sizeStyle, {
			fontSize: props.size + 'rpx',
			backgroundImage: props.bgImage,
			animationTimingFunction: `steps(${props.steps})`
		}]"></view>
	</view>
</template>

<script lang="ts" setup>

    import {
    	ref,
    	computed
    } from "vue";

    const props = defineProps({
        mode: {
        	type: String,
        	default: 'flower'
        },
        path: {
        	type: [String, Object]
        },
        color: {
        	type: String,
        	default: '#99989a'
        },
        lineColor: {
        	type: String,
        	default: '#e4e4e4'
        },
        bgImage: {
        	type: String,
        	default: "conic-gradient(#00d9c0, #00dbc4, #00dcc9, #3fdfce, #6be1d3, #8de1d7, #ade4dc, #c9e5e1)"
        },
        size: {
        	type: Number,
        	default: 36
        },
        steps: {
        	type: Number,
        	default: 8
        },
        lineWidth: {
        	type: Number,
        	default: 8
        }
    });
    const images = ref({
        flower: {
            icon: "gy_icon_loading",
            steps: 8
        },
        dot: {
            icon: "gy_icon_loading",
            steps: 9
        }
    });

    const sizeStyle = computed(() => {
        return {
        	width: props.size + 'rpx',
        	height: props.size + 'rpx'
        };
    })
</script>

<style lang="scss" scoped>
	.gy-loading-icon{
	    display: inlingy-block;
	    vertical-align: middle;
	
	    .gy-loading-icon-image {
	        border-radius: 50%;
	        -webkit-animation: gy-loading-icon-image 1s infinite;
	        animation: gy-loading-icon-image 1s infinite;
	    }
	
	    .gy-loading-icon-font{
	        @include flex-center-center;
	        border-radius: 50%;
	        -webkit-animation: gy-loading-icon-image 1s infinite;
	        animation: gy-loading-icon-image 1s infinite;
	        -webkit-background-clip: text;
	        -webkit-text-fill-color: transparent;
	    }
	
	    @keyframes gy-loading-icon-image {
	        0% {
	            -webkit-transform: rotate(0deg);
	            transform: rotate(0deg);
	        }
	
	        to {
	            -webkit-transform: rotate(1turn);
	            transform: rotate(1turn);
	        }
	    }
	
	    .gy-loading-icon-circle {
	        display: inlingy-block;
	        vertical-align: middle;
	        border-radius: 50%;
	        border: 3px solid;
	        border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
	        animation: gy-loading-icon-circle 1s linear infinite;
	    }
	
	    @-webkit-keyframes gy-loading-icon-circle {
	        0% {
	            transform: rotate(0);
	        }
	
	        100% {
	            transform: rotate(360deg);
	        }
	    }
	
	}
	
</style>